<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
    <% String path=request.getContextPath(); String basePath=request.getScheme()
    + "://" + request.getServerName() + ":" + request.getServerPort() + path
    + "/"; %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/icon.css" />
    <script type="text/javascript" src="<%=basePath%>js/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery.cookie.js"></script>
    <style type="text/css">
    body{
            margin: 0;
            padding: 0;
            font-family:'微软雅黑';
        }
        
    ul{
       list-style: none;
    }
    
    ul,li{
       margin: 0;
       padding: 0;
       overflow: hidden;
    }
            
   	.login-panel{
   		background:url("images/main/login_bg.png") no-repeat;
   		width: 330px;
		height: 350px;
		margin-left: 60%;
		margin-top: 50px;
		padding-top: 40px;
		padding-left: 23px;
   	}
   	
   	.login-button{
   		background:url('images/main/login_button.png') no-repeat center;
   		width:104px;
   		height:32px;
   		cursor: pointer;
   		border-radius: 7px;
		border: 0px;
   	}
   	
   	.title-div
    {
    	height: 60px;
    	background-color: #ffffff;
    	border: 0px;
    }
    .cloud-title{
    	background: url("images/main/cmgr.png") no-repeat left;
        padding-top:36px;
        margin-left: 70px;
    }
    
    .center-div
    {
    	background: url("images/main/login_1.png") no-repeat center;
    	border: 0px;
    }
    
    .main-div
    {
    	width: 1366px;
    	height: 700px;
    	border: 0px;
    }
    
    .float-div
    {
    	width: 100%;
    	height: 40%;
    	position: absolute;
    	z-index: -11;
    	bottom: 0px;
    	background: #ffffff;
    }
    
    .float2-div
    {
    	width: 100%;
    	height: 516px;
    	position: absolute;
    	z-index: -10;
    	background: #ffffff;
    	border: 0px;
    }
    
    .panel-body
    {
    	border-color: #59B859;
    	border-bottom: 0px;
    }
    </style>
</head>
<body align="center" style="background: #59B859">
	<div class="float2-div"></div>
<div id="mainDiv" class="easyui-layout main-div">
 	<div data-options="region:'north'" class="title-div">
		<div class="cloud-title">&nbsp;</div>
	</div>
	<div data-options="region:'center'" class="center-div">
	<form id="loginff" method="post">
		<div class="login-panel">
			<ul>
				<li><input id="username" value="" name="userName" class="easyui-textbox easyui-validatebox" 
				data-options="iconCls:'icon-man',iconAlign:'left',prompt:'请输入账号',width:280,height:30">
					<!--
					validType="remote['validateUsername.do','search.staffCode']" delay="2000" tipPosition="left" invalidMessage="用户名不存在"
					-->
					</li>
				<li style="margin-top:20px"><input id="pwd" name="password" 
					class="easyui-textbox" 
					data-options="
					value:'',
					type:'password',
					prompt:'请输入密码',
					iconAlign:'left',
					iconCls:'icon-lock',
					width:280,height:30"></li>
				<li style="margin-top:20px;">
					<ul style="width:280px">
						<li><input id="veryCode" name="veryCode" class="easyui-textbox easyui-validatebox" data-options="width:150,height:30">
							</li>
						<li style="margin-top:-30px;float:right"><div style="width:100px;height:32px;">
							 <img id="imgObj" alt="看不清换一个" onclick="changeImg()" src="verifycode" style="cursor:pointer"/>
						</div></li>
						<li style="margin-top:18px;font-size:13px;color:#777777">&nbsp;<span id="promtInfo">验证码输入不区分大小写</span></li>
					</ul>
				</li>
				<!--
				<li style="margin-top:26px;float:none"><input type="checkbox">&nbsp;记住用户名<li>
				-->
				<li style="margin-top:26px;float:none"><input type="button" onclick="$('#loginff').submit()" class="login-button"><li>
				<li style="margin-top:5px;float:none">&nbsp;<span id="msg" style="font-size:13px;color:red"></span><li>
			</ul>
		</div>
	</form>
    	<div style="width:100%;height:25px;bottom:0px;position:absolute;background:#ffffff"> 
		<ul>
		<li>
			<div style="color:#777777;font-size:14px;text-align:center;margin-top:2px">轻翼互助社区  版权所有  @2015</div>
		</li>
		</ul>
	</div>
</div>
</body>
<script>
$(document).ready(function(){
	function isIE10OrChrome()
	{
		// 返回是否是符合要求的浏览器
		var result = false;
		var userAgent = navigator.userAgent;
		
		// 判断是否是IE10
		var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
		if(parseFloat(RegExp["$1"])==10)
		{
			result = true;
		}
		
		// 判断是否是Chrome以上版本
		if(userAgent.indexOf("Chrome") != -1)
		{
			result = true;
		}
		return result;
	}
	if(!isIE10OrChrome())
	{
		$('#promtInfo').html('<font style="color:red">系统对您当前浏览器支持不稳定，建议您使用Chrome或者IE10</font>');
	}
	
	var funame = $.cookie('clouduname');
	if(funame!=null){
		$('#username').textbox('setValue',funame);
	}
	
	var fpwd = $.cookie('cloudpwd');
	if(fpwd!=null){
		$('#pwd').textbox('setValue',fpwd);
	}
	
	$(window).resize(function(){
		$('.main-div').css({ 
			position:'absolute', 
			left: ($(window).width() - $('.main-div').outerWidth())/2, 
			top: ($(window).height() - $('.main-div').outerHeight())/2 + $(document).scrollTop() 
		});
		$('.float2-div').css({ 
			position:'absolute', 
			top: $('.main-div').first().position().top + 59
		});
		 
	});
	
	$(window).resize(); 
	
	$(document.body).append('<div class="float-div"></div>');
	
	$('#loginff').form({
	url: 'user/login',
	onSubmit: function(){
		if($('#username').textbox('getText').trim()=='')
		{
			$('#msg').html('请填写用户名');
			return false;
		}
		if($('#pwd').textbox('getText').trim()=='')
		{
			$('#msg').html('请填写密码');
			return false;
		}
		if($('#veryCode').textbox('getText').trim()=='')
		{
			$('#msg').html('请填写验证码');
			return false;
		}
		$('#msg').html('');
	},
	success: function(data){
		console.log(data);
		var data = eval('(' + data + ')');
		var flag = data.flag;
		var msg = data.msg;
		if(flag == '0')
		{
			$.cookie('clouduname',$('#username').textbox('getText').trim(),{expire:7});
			$.cookie('cloudpwd',$('#pwd').textbox('getText').trim(),{expire:7});
			if(data.hasVMMenu==1){
				genSsoIframe('http://172.16.106.20/ocmp_flow_web?query='+data.isKey,function(){
					location.href = 'home.jsp';		
				});
			}else{
				location.href = 'main.jsp';
			}
		}
		else
		{
			$('#veryCode').textbox('clear');
			changeImg();
			$('#msg').html(msg);
		}
	}
	});
});

function changeImg(){
	var imgSrc = $("#imgObj");
	var src = imgSrc.attr("src");
	imgSrc.attr("src",chgUrl(src));
}

//时间戳
//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
function chgUrl(url){
	var timestamp = (new Date()).valueOf();
	if((url.indexOf("&")>=0)){
		url = url + "timestamp=" + timestamp;
	}else{
		url = url + "?timestamp=" + timestamp;
	}
	return url;
}

function isRightCode(){
	var code = $("#veryCode").attr("value");
	code = "c=" + code;
	$.ajax({
		type:"POST",
		url:"resultServlet",
		data:code,
		success:callback
	});
}

$(function(){
	//图标禁止获取tab焦点
	$(".textbox-icon").attr("tabIndex",-1);
	
	//验证码框加入回车登录事件
	$("input",$("#veryCode").next("span")).keydown(function(event){
	  var val = $(this).val();
	  $("#veryCode").textbox('setValue',val);
	  if(event.keyCode == 13){
	    $('#loginff').submit();
	  }
	});
})

function genSsoIframe(src, ssoCallback) {
	$('body').append($('<iframe />').attr({  
            style: "display:none;width:0;height:0",
            id: "ssoLoginFrame",
            name: "ssoLoginFrame",
            src: src
        }));
	$("#ssoLoginFrame").get(0).onload = function(){
	// 父页面回调
	ssoCallback.call(window.parent);
	// 删除iframe
	setTimeout(function(){
	delIframe("#ssoLoginFrame");
	}, 500);
	};

	function delIframe (iframe) {
		if ($(iframe)) {
			$(iframe).remove();
		}
	}
}

</script>

</html>